<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <!--可以让部分国产浏览器默认采用高速模式渲染页面-->
    <meta name="renderer" content="webkit">
    <!--为了让 IE 浏览器运行最新的渲染模式下-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--SEO三大标签-->
    <title>网抑云音乐</title>
    <!--    <meta name="keywords" content="网易云音乐，音乐，播放器，网易，下载，播放，DJ，免费，明星，精选，歌单，识别音乐，收藏，分享音乐，音乐互动，高音质，320K，音乐社交，官网，移动站，music.163.com">-->
    <!--    <meta name="description" content="网易云音乐是一款专注于发现与分享的音乐产品，依托专业音乐人、DJ、好友推荐及社交功能，为用户打造全新的音乐生活。">-->
    <!--
    apple-touch-icon: 是苹果私有的属性
    作用: 指定将网页保存到主屏幕上的时候的图标
    -->
    <link rel="apple-touch-icon" href="./apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="114x114" href="./apple-touch-icon114.png">
    <link rel="apple-touch-icon" sizes="152x152" href="./apple-touch-icon152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon180.png">
    <!--网页快捷图标-->
    <link rel="icon" href="./favicon.ico">
    <script>
        /*
        注意点:
        预渲染的本质就是在打包时就"模拟浏览器"提前访问路由对应的网页, 然后将访问的结果写入到.html文件中
        但是由于在打包时访问并不是通过"真实的浏览器"来访问, 所以拿不到正是的像素比
        所以预渲染时写入到.html文件中的meta就是错误的
        也正是因为预渲染的时候已经写入过meta标签了, 而运行的时候又会执行一次JS代码再写入一次
        就导致了网页中有两个meta标签
        * */
        //window.devicePixelRatio告诉浏览器应使用多少屏幕实际像素来绘制单个CSS像素 返回1|2|3|？
        let scale = 1.0 / window.devicePixelRatio;
        //设置视口标签
        let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`;
        document.write(text);
        //设置html标签fontSize
        document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
        //data-dpr自定义属性像素比
        document.documentElement.setAttribute('data-dpr', parseInt(window.devicePixelRatio) + '');
        //data-theme 用于改变主题颜色
        document.documentElement.setAttribute('data-theme', 'theme');
    </script>
</head>

<body>
    <div id="app"></div>
</body>

</html>
<!--
1.初始化HTML中的代码
2.利用rem+视口释放的方式来适配移动端
注意点: 如果在HTML文件中用到了字符串模板, 字符串模板中用到了变量, 那么html-plugin是无法处理的, 所以会报错
        如果想解决这个问题, 那么我们需要再借助一个loader, html-loader (https://www.npmjs.com/)
        由于是vue-cli创建的没有webpack.config,所以新建一个vue.config配置html-loader
3.借助postcss-pxtorem(npm i -D postcss-pxtorem)实现自动将px转换成rem,即可以按照设计师给的图片编写
    同时新增配置: postcss.config.js
4.借助webpack实现CSS3/ES678语法的兼容 (.browserslistrc)
5.借助fastclick(main.js配置) npm install fastclick@1.0.6 解决移动端100~300ms的点击事件延迟问题
6.初始化默认的全局样式
    1).base.scss - 全局标签属性配置(html, body) 该文件引入234 main.js引入该组件
    2).mixin.scss - 各种函数(bg_color修改背景颜色)
    3).variable.scss - 定义字体大小&颜色($font_samll:12Px;)
    4).rest.scss - 初始化标签样式(ol,ul{list-style:none})
注意点: 在移动端开发中, 一般情况下我们不需要让字体大小随着屏幕尺寸的变化而变化(mixin.scss - font_dpr())
        由于我们是通过视口缩放来适配移动端的, 所以我们不能直接设置字体大小, 否则字体大小就会随着屏幕尺寸的变化而变化
7.axios npm install axios@0.19.0
    配置：'src/api/network.js'(全局配置和调用方法定义) 'src/api/index.js' (导入'./network' 封装接口)
    使用: 对应组件import {getBanner,getPersonalized ,getNewAlbum,getNewSong} from '../api/index'
7.头部固定 Header颜色换肤
     1).设置thems->scss文件中函数替换颜色document.documentElement.setAttribute('data-theme',this.themes[this.index]) 
     2).排版 display: flex; justify-content: space-between(两边不留间隙);头部排版
8.头部固定 Tabbar(<router-link tag="div" to="recommend">)  app.js(<router-view>)
    1).排版 display: flex; justify-content: space-around(两边会留空隙); 
    2).scss写法如果有该类 &.router-link-active{ //router-link激活状态}
9. 推荐版块 Recommend父组件 包含小组件 拖拽功能组件(ScrollView)、Banner(滚动横幅)、Personalized(推荐歌单和最新专辑)、SongList(最新音乐)
    1).父组件调用接口获取数据传递给子组件:xxx="data"
9.1. 轮播图
    1).swiper npm install vue-awesome-swiper@3.1.3
        配置: 使用的页面
    2).注意点1: v-if="banners.length > 0"自动轮播到最后一页之后继续轮播
    3).注意点2: 如果想覆盖swiper的样式, 那么style标签不能是scoped的, 否则无法覆盖
9.2. Personalized(推荐歌单和最新专辑)
    1). vue-lazyload 图片懒加载 npm install vue-lazyload@1.3.3
        配置 main.js
        使用 <img v-lazy="value.picUrl">
    2).display: flex;justify-content: space-around;flex-wrap: wrap(规定灵活的项目在必要的时候拆行或拆列);
9.3. SongList(最新音乐)
    1).display: flex;align-items: center(在该行的侧轴（纵轴）上居中放置);
9.4. ScrollView拖拽功能组件 cnpm install iscroll@5.2.0
    配置：ScrollView.vue 配置插槽slot
    使用：Recommend.vue 导入ScrollView组件替换插槽slot
10. Detail(歌单详情)
10.1. DetailHeader(头部) window.history.back();返回
10.2. DetailTop(下方顶部图片)
10.3. DetailBottom(下方底部播放列表) scrollview包含
    1). position: fixed;top:500px;盖住图片
    2). scrollview配置probeType:3,//像素级XX 可以获取拖动距离像素,并提供一个监听滚动距离的方法给外界scrolling,
    <ScrollView ref="scrollview">获取对象,外界通过函数回调获取滚动距离this.$refs.scrollview.scrolling((offsetY)=>{});
    3). <DetailTop ref="top">获取节点并修改样式实现图片放大this.$refs.top.$el.style.transform=`scale(${scale})`
11. player(播放界面)
11.1. PlayerHeader(播放界面头部)
11.2. PlayerMiddle(播放界面中间)
    1). &:last-of-type{padding-bottom: 100px};使最后底部歌词向上不被挡住
12.
13.
14.
15.
16.
17.
18.
20.
-->